<template>
  <view class="report-list-edit">
    <view class="title">填写信息</view>
    <view class="report-list">
      <vew class="report-item rbox">
        <text class="name">回复类型</text>
        <view class="select-list cbox">
          <block v-for="(item, idx) in list" :key="idx">
            <view
              :class="['select-item', 'rbox', { active: activeIndex == idx }]"
              @tap="changeState(idx)"
              >{{ item }}</view
            >
          </block>
        </view>
      </vew>
    </view>

    <view
      class="single-btn btn-normal rbox box_center btn-position"
      @tap="goPage('reportHandle')"
    >
      确认
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      list: [
        '采纳', '感谢您的上报'
      ]
    }
  },
  methods: {
    goPage(url) {
      if (url) {
        wx.navigateTo({
          url: `/pages/${url}/${url}`
        })
      }
    },
    changeState(idx) {
      this.activeIndex = idx
    }
  }
}
</script>

<style lang="scss" scoped>
.report-list-edit {
  padding: 40rpx 42rpx 0;
  min-height: 100vh;
  background-color: #fff;
  .title {
    font-size: 40rpx;
    line-height: 1;
  }
  .report-list {
    margin-top: 40rpx;
    .report-item {
      .name {
        font-size: 32rpx;
        line-height: 1;
      }
      .select-list {
        margin-left: 150rpx;
      }
      .select-item {
        &:not(:first-child) {
          margin-top: 30rpx;
        }
        position: relative;
        font-size: 32rpx;
        line-height: 1;
        color: #b7b7b7;
        &::before {
          margin-right: 15rpx;
          content: "";
          display: flex;
          width: 34rpx;
          height: 34rpx;
          border-radius: 50%;
          background-color: #fff;
          border: 1rpx solid #d2cccc;
        }
        &.active {
          &::after {
            position: absolute;
            top: 50%;
            left: 18rpx;
            transform: translate(-50%, -50%);
            content: "";
            width: 22rpx;
            height: 22rpx;
            border-radius: 50%;
            background-color: #d2cccc;
          }
        }
      }
    }
  }
}
</style>